<template>
  <div class="activity">
    <scroller  v-show="dataList.length"  lock-x scrollbar-y height="-60" use-pullup :pullup-config="pullupConfig2" ref="demo2" @on-pullup-loading="load2">
      <div class="list">
          <div v-for="(item,index) in dataList" :key="index" class="item box" @click="linkTo('noticeDetail',item.newsId)">
            <!-- <div class="item-pic"><img :src="item.images[0].fileUrl" alt=""></div> -->
            <div class="item-info">
              <div class="title">{{item.newsTitle}}</div>
              <div class="text" v-html="item.newsContent"></div>
              <div class="date">{{item.publishTime}}</div>
            </div>
          </div>
      </div>
      <div v-if="noData" class="no-data">没有更多内容</div>
    </scroller>
    <menu-list></menu-list>
  </div>
</template>
<script>
import {Scroller } from 'vux'
import menuList from '../common/navbar-menu'
let CONSTANT = require('../../../wechat/static/constant/constant.js'),
    common = require("../../../wechat/static/common/common.js");
  export default {
    data() {
      return {
        dataList:[],
        pullupConfig2: {
            content: '上拉加载更多',
            downContent: '松开进行加载',
            upContent: '上拉加载更多',
            loadingContent: '加载中...'
        },
        pageIndex:1,
        dataForm:'',    
        loading:true,
        noData:false
      }
    },
    components: {
      menuList,
      Scroller
    },
    mounted() {

      this.getActivity()
    },
    methods: {
      load2 () {
         if(!this.loading) return false;
         let { pageIndex, pageCount} = this.dataForm;
         if (pageCount <= this.pageIndex){
             setTimeout(() => {
                this.$refs.demo2.disablePullup()
                this.noData = true
            }, 100)
             return false;
         }
          this.loading = false;
          this.pageIndex++;
          setTimeout(() => {
            this.getActivity()
            this.$refs.demo2.donePullup()
         }, 100)
      },
      getActivity(){
        let  url = CONSTANT.URL.VOTENEWS.FINDVOTELIST,
            param = {pageIndex:this.pageIndex,pageSize:10}
        common.requestAjax(url,{},param,(res)=>{
            if(res.status == 200){
                this.loading = true;
                let data = res.data,
                    pageCount = data.pageCount,
                    bussData = data.bussData
                    if(pageCount == 0||pageCount == 1){
                         this.$refs.demo2.disablePullup()
                    }
                this.dataForm = data;
                this.dataList =  this.pageIndex <= pageCount ? this.dataList.concat(bussData) : this.dataList
            }else{

            }
        })
      },
      linkTo(link,id){
        this.$router.push({ path: link, query: { id: id }})
      },
    }
  };
</script>
<style lang="scss">
   .xs-plugin-pullup-container{
        font-size: 12px;
        bottom: -50px;
    }
      #vux-scroller-g07w2{
          background-color: #f4f4f4;
      }
    .activity{
        height: 100%;
        background-color: #F0F2F5;

        .no-data{
            font-size: 12px;
            bottom: 0rem;
            text-align: center;
            position: relative;
        }

        .list{
            width: 100%;
            background-color: #fff;
            padding-left: .3rem;
            .item{
              background-color: #fff;
              padding: .4rem 0rem .3rem 0;
              border-bottom: 1px solid #dedede;
                &:last-child{
                  border-bottom: 0px solid #E1E1E1;
                }
                .item-pic{
                   height: 1.6rem;
                  img{
                    width: 2.17rem;
                    height: 1.63rem;
                  }
                }
                .item-info{
                  height: 1.6rem;
                  margin-left: .27rem;
                  width: 6.69rem;
                  .title{
                    font-size: .32rem;
                    color: #333;
                    margin-bottom: .13rem;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                    overflow: hidden;
                  } 
                  .text{
                    font-size: .28rem;
                    color: #666;
                    margin-bottom: .2rem;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                    overflow: hidden;   
                    height: .5rem;  
                    img,video{
                      display: none;
                    }                 
                  }
                  .date{
                    font-size: .24rem;
                    color: #999;
                  }
                }
            }
        }
    }
</style>

